<%--
  Created by IntelliJ IDEA.
  User: 世界上最帅的詹姆斯
  Date: 2021-01-20
  Time: 10:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link href="<%=basePath%>join/css/style.css" rel="stylesheet" type="text/css">
<link href="<%=basePath%>join/css/nice-select.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="<%=basePath%>page/layui/css/layui.css">
<style type="text/css">
    .rigth{
        width: 320px;
        height: 800px;
    }
    .left{
        width: 858px;
        height: 100%;

    }
    .wehotel{
        width: 100%;
        height: 100%;
    }

    input[type="checkbox"] {
        position: relative;
        margin: 0;
        padding: 0;
        width: 17px;
        height: 17px;
        text-align:center;
        display: inline-block;
        vertical-align: middle;
        line-height: 15px;
    }
    input[type="checkbox"]:disabled {
        opacity: .3;
    }
    input[type="checkbox"]:enabled {
        cursor: pointer;
    }
    input[type="checkbox"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #bdbfc2;
        border-radius: 3px;
        outline: none;
        box-sizing: border-box;
    }
    input[type="checkbox"]:checked::before {
        content: "\2713";
        background-color: #3bb5fe;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        border: none;}
</style>
<body >
<ul class="layui-nav layui-bg-green" style="position: relative">
    <li class="layui-nav-item"  style="position: relative;left: 100px"><img src="../static/images/hotel-icon-topclass.png" style="width: 180px;height: 50px"></li>
    <li class="layui-nav-item" style="position: relative;left: 150px"><span style="font-size: 18px;color: #f7f7f7">小姜姜国际酒店</span></li>
    <li class="layui-nav-item" style="position: relative;left: 250px"><a href="<%=basePath%>join/index.html">首页</a></li>
    <li class="layui-nav-item" style="position: relative;left: 250px"><a href="<%=basePath%>index/aboutus.html">关于品牌</a>
        <dl class="layui-nav-child">
            <dd><a href="">关于我们</a></dd>
            <dd><a href="">品牌背景</a></dd>
            <dd><a href="">品牌CEO</a></dd>
        </dl></li>
    <li class="layui-nav-item " style="position: relative;left: 250px"><a href="<%=basePath%>page/login/login.jsp">用户登录</a></li>
    <li class="layui-nav-item" style="position: relative;left: 250px"><a href="<%=basePath%>page/register/register.jsp">用户注册</a></li>
    <li class="layui-nav-item" style="position: relative;left: 250px">
        <a href="<%=basePath%>user/loginMyorder">我的订单</a>

    </li>
    <li class="layui-nav-item layui-this" style="position: relative;left: 250px"><a href="">预订酒店</a></li>
</ul>

<div class="wehotel" style="margin: 0px 200px;position: relative">
    <div class="left" style="border: 1px solid deepskyblue;display: inline-block;position: relative;top:88px;" >
        <div class="grid-demo grid-demo-bg1" style="position: relative;">
            <div >
                <p style="font-size: 20px ;color: deepskyblue;position: relative;padding: 40px">|<b style="font-size: 20px ;color: #000000">&nbsp;&nbsp;预定信息</b></p>
            </div>
            <div style="position: relative;margin: 0 40px 40px 40px;font-size: 15px">
                <label>入住日期：</label>
                <input id="startTime" type="text" disabled value="${room.startTime}" style="position: relative;left: -100px">
                <label style="position: relative;left: 200px">离店日期：</label>
                <input id="endTime" type="text" disabled style="position: relative;left: -10px" value="${room.endTime}">
                <label style="position: relative;left: 500px;">房间数量：</label>
                <div style="display: inline-block;position: relative;float: right;left: -20px;top: -10px">
                    <select id="count" name="city" lay-verify="">
                        <c:forEach var="i" begin="1" end="${allCountRoomInfo}" >
                            <option value="${i}">${i}</option>
                        </c:forEach>
                    </select>
                </div>

            </div>
            <div style="background: #e9f4ff;width: 758px;height: 108px;position: relative;left: 40px;margin: 0 0 40px 0">
                <div style="background: #ffffff ;width: 70px;height: 78px;line-height: 20px;position: relative;left: 20px;top: 20px"align="center">
                    <span style="display: block;font-size: 12px">${room.startTime}</span>
                    <span style="display: block ;font-size: 12px">一间</span>
                    <span style="display: block ;font-size: 12px">不含早</span>
                    <span style=";font-size: 12px;color: red"><i class="layui-icon">&#xe65e;</i>${room.rtprice}</span>
                </div>
            </div>
        </div>
        <hr>
        <div>
            <div >
                <p style="font-size: 20px ;color: deepskyblue;position: relative;padding: 40px">|<b style="font-size: 20px ;color: #000000">&nbsp;&nbsp;入住信息</b></p>
            </div>
            <div style="position: relative;margin: 0px 45px 20px 45px">
                <label style="font-size: 12px">联系人：</label>
                <input name="oname" id="oname" class="layui-input" style="width: 150px;height: 25px;display: inline-block;position: relative;left: 33px">
                <p  style="color: red;font-size: 12px;left: 95px;position:relative;">*必填</p>
            </div>
            <div style="position: relative;margin: 0px 45px 20px 45px">
                <label style="font-size: 12px">手机号码：</label>
                <input name="ophone" id="ophone" class="layui-input" style="width: 200px;height: 25px;display: inline-block;position: relative;left: 20px">
                <p style="color: red;font-size: 12px;position: relative;left: 95px">*必填</p>
            </div>
            <div style="position: relative;margin: 0px 45px 20px 45px">
                <label style="font-size: 12px">证件号码：</label>
                <input class="layui-input" style="width: 250px;height: 25px;display: inline-block ;position: relative;left: 20px">
                <span style="color: red;font-size: 12px;position: relative;left: 50px">请填写实际入住人的有效证件，否则无法入住</span>
                <p style="color: red;font-size: 12px;position:relative;left: 95px">*必填</p>
            </div>
            <div style="position: relative;margin: 0px 45px 20px 45px" >
                <label style="font-size: 12px">特殊需求：</label>
                <div class="layui-input-block" style="margin: 0 0px 0 40px">
                    <input type="checkbox" name="like[write]" lay-skin="primary" style="margin: 0 0px 0 40px">无烟房
                    <input type="checkbox" name="like[read]"  lay-skin="primary" checked style="margin: 0 0px 0 40px">高层客房
                    <input type="checkbox" name="like[dai]"  lay-skin="primary" style="margin: 0 0px 0 40px">相邻房
                </div>
            </div>
        </div>
        <hr>
        <div>
            <div >
                <p style="font-size: 20px ;color: deepskyblue;position: relative;padding: 40px">|<b style="font-size: 20px ;color: #000000">&nbsp;&nbsp;支付与优惠信息</b></p>
            </div>
            <div style="position: relative;margin: 0px 45px 20px 45px" >
                <label style="font-size: 12px">支付方式</label>
                <div class="layui-input-block" style="font-size:12px;margin: 0 0px 0 20px;display: inline-block;position: relative">
                    <input type="radio" checked name="xxx" lay-skin="switch"> <span style="position: relative;font-size: 12px;left: 25px;color: #666666 " >支付全部房费</span>
                </div>
            </div>
            <div style="position: relative;background: #f7f7f7;width: 758px;height: 74.8px;margin: 0 40px 40px 40px">
                <div style="margin: 20px ;position: relative;top:10px;font-size: 12px;color: #666666">
                    <b>取消政策:</b><span>不可取消订单。</span>
                    <br>
                    <b>温馨提示:</b><span>酒店于住店当天14:00后办理入住，离店当天13:00前办理退房，入离日期以当地时间为准。如您在14:00前到达，可能需要等待方能入住。若超过房间最多入住人数，则可能需要补差价或酒店拒绝入住，具体以酒店安排为准。</span>
                </div>
            </div>
        </div>
    </div>
    <div class="rigth"  style="display: inline-block;border: 1px solid hotpink;position: relative;top: -51px">
        <div class="" style="">
            <div class="" style="padding: 20px ;width: 318px">
                <img src="<%=basePath%>${room.rimg.split("\\\\")[2]}" width="280" height="210" alt="找不到" style="border: 1px solid #f5f5f5;position: relative">
                <p style="font-size: 20px;position: relative;padding: 10px">小姜姜国际酒店</p>
                <p style="padding: 10px">地址：湖南涉外经济学院</p>
            </div>
        </div>
        <hr>
        <div  style="">
            <div style="font-size: 13px;color: gray;padding: 10px;position: relative">
                入住房型
                <P style="font-size: 15px;padding: 7px 0;color: #000000">${room.rtname}</P><span style="position: relative;float: right;top: -20px">1间</span>
                <div style="padding: 0 0 6px 0">价格名称</div>
                <div class="">入住日期</div>
                <p style="font-size: 15px;padding: 7px 0;color: #000000">${room.startTime}至${room.endTime}</p> <span  style="position: relative;float: right;top: -23px">${count}晚</span>
                <div >
                    <p style="padding:20px 0 30px 0 ">房费小计</p><span style="position: relative;float: right;top: -45px"><i class="layui-icon">&#xe65e;</i>${count*room.rtprice}</span>
                </div>
            </div>
        </div>
        <hr>
        <div style="position: relative">
            <div style="font-size: 20px;padding: 25px">总金额：<span style="position: relative;left: 150px;color: #ff0000;font-size: 25px"><i class="layui-icon">&#xe65e;</i>${count*room.rtprice}</span></div>
            <button class="layui-btn layui-btn-warm" style="position: relative;left: 120px;margin: 0 0 35px 0" onclick="get()">提交订单</button>
            <div style="padding: 0 0px 10px 70px">
                <input  type="checkbox" name=""  lay-skin="primary" checked>
                <span style="font-size: 12px; color: #999999">已阅读并同意<a>《WeHotel酒店预定须知》</a></span>
            </div>
            <input id="room" value="${room}" style="display: none">
        </div>
    </div>
</div>

<footer class="footer" style="width: 100%;position: relative;top: 50px">
    <div class="container " style="width: 100%">
        <div class="box" style="width: 1500px;position: relative;left: -500px">
            <div class="logo"><img src="../static/picture/logo.png"></div>
            <div class="footer-nav">
                <a href="../join/index.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">首页</a>
                <a href="aboutus.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">关于潮漫</a>
                <a href="visu.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">潮漫形象</a>
                <a href="../join/index.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">合作加盟</a>
                <a href="../join/index.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">新闻动态</a>
                <a href="http://www.plateno.com/" target="_blank" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">预订酒店</a>
            </div>
        </div>
        <div class="ewm-wrap lg-hide box "style="width: 1500px;position: relative;left: -500px;top: -50px" >
            <img class="public-ewm" src="../static/images/wx.png" style="width: 100px;height: 100px"/>
            <p class="txt">长按识别二维码，关注小姜姜</p>
        </div>
        <p class="copyright"style="position: relative;top: -50px">
            Copyright &copy; 2020 - 2020 小意精品酒店（湖南涉外经济学院） <a href="http://www.baidu.com" target="_blank">湘ICP备20201119号</a>
        </p>
    </div>
</footer>
    <script src="<%=basePath%>page/layui/layui.js"></script>
    <script src="<%=basePath%>join/js/jquery.js"></script>
    <script src="<%=basePath%>join/js/jquery.nice-select.js"></script>
    <script>
        function get() {
            //获取当前页面输入的值
           var count= $("#count").val();
            var oname=$("#oname").val();
            var ophone=$("#ophone").val();
            var startTime=$("#startTime").val();
            var endTime=$("#endTime").val();
            location.href="../OrderRoom?count="+count+"&oname="+oname+"&ophone="+ophone+"&id="+${room.id}+"&startTime="+startTime+"&endTime="+endTime;
        }
    </script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    $(document).ready(function() {
        $('select').niceSelect();
    });
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>

</body>
</html>
